<!--
 * @Author: anxia.ack anchenkai@come-future.com
 * @Date: 2025-04-19 20:29:11
 * @LastEditors: anxia.ack anchenkai@come-future.com
 * @LastEditTime: 2025-04-20 15:59:28
 * @FilePath: /free-learning/src/views/system/message/index.vue
 * @Description: 消息管理页面
-->
<script setup lang="ts">
import { MessageAPI, type Message, type MessagePageQuery } from "@/api/system/message";
import { Message2Router } from "@/enums/MessageEnum";
import router from "@/router";
import { Search, Refresh } from "@element-plus/icons-vue";
import type { DateModelType } from "element-plus";

defineOptions({
  name: "MyMessage",
});

// 查询条件
const queryForm = ref<Partial<MessagePageQuery>>({
  pageNum: 1,
  pageSize: 10,
  title: undefined,
  publishTimeStart: undefined,
  publishTimeEnd: undefined,
  isRead: undefined,
  type: undefined,
});

// 日期范围
const dateRange = ref<[DateModelType, DateModelType]>();

// 监听日期变化
watch(dateRange, (val) => {
  if (val) {
    queryForm.value.publishTimeStart = val[0] as string;
    queryForm.value.publishTimeEnd = val[1] as string;
  } else {
    queryForm.value.publishTimeStart = undefined;
    queryForm.value.publishTimeEnd = undefined;
  }
});

// 表格数据
const tableData = ref<Message[]>([]);
const total = ref(0);
const loading = ref(false);

// 状态选项
const readStatusOptions = [
  { label: "未读", value: 0 },
  { label: "已读", value: 1 },
];

// 获取数据
const fetchData = async () => {
  try {
    loading.value = true;
    const res = await MessageAPI.page(queryForm.value as MessagePageQuery);
    console.log(res);

    tableData.value = res.records;
    total.value = res.total;
  } catch (error) {
  } finally {
    loading.value = false;
  }
};

// 处理页码变化
const handleCurrentChange = (page: number) => {
  queryForm.value.pageNum = page;
  fetchData();
};

// 处理每页条数变化
const handleSizeChange = (size: number) => {
  queryForm.value.pageSize = size;
  queryForm.value.pageNum = 1;
  fetchData();
};

// 处理查询
const handleQuery = () => {
  queryForm.value.pageNum = 1;
  fetchData();
};

// 重置查询
const resetQuery = () => {
  queryForm.value = {
    pageNum: 1,
    pageSize: 10,
    title: undefined,
    publishTimeStart: undefined,
    publishTimeEnd: undefined,
    isRead: undefined,
    type: undefined,
  };
  dateRange.value = undefined;
  fetchData();
};

// 标记已读
const handleRead = async (id: number) => {
  try {
    await MessageAPI.updateIsRead(id);
    ElMessage.success("标记已读成功");
    fetchData();
  } catch (error) {}
};
const handleToProcess = async (message: Message) => {
  console.log(message);
  try {
    await MessageAPI.updateIsRead(message.id);
    ElMessage.success("标记已读成功");
    fetchData();
  } catch (error) {
  } finally {
    router.push(Message2Router[message.type]);
  }
};

// 全部标记已读
const handleReadAll = async () => {
  try {
    await MessageAPI.updateAllIsRead();
    ElMessage.success("全部标记已读成功");
    fetchData();
  } catch (error) {}
};

onMounted(() => {
  fetchData();
});
</script>

<template>
  <div class="app-container">
    <!-- 搜索工具栏 -->
    <el-card class="mb-4 !border-none" shadow="never">
      <el-form ref="queryFormRef" :model="queryForm" inline>
        <el-form-item label="消息标题" prop="title">
          <el-input
            v-model="queryForm.title"
            placeholder="请输入消息标题"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="发布时间" prop="publishTime">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="阅读状态" prop="isRead">
          <el-select
            v-model="queryForm.isRead"
            placeholder="请选择状态"
            clearable
            style="width: 140px"
          >
            <el-option
              v-for="item in readStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="消息类型" prop="type">
          <Dict v-model="queryForm.type" code="message_type" :style="{ width: '140px' }" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
          <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="!border-none" shadow="never">
      <div class="mb-4 flex justify-end">
        <el-button type="primary" @click="handleReadAll">全部标记已读</el-button>
      </div>

      <el-table v-loading="loading" :data="tableData" border>
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="title" label="消息标题" min-width="200" show-overflow-tooltip />
        <el-table-column prop="content" label="消息内容" min-width="300" show-overflow-tooltip />
        <el-table-column prop="type" label="消息类型" width="120" align="center">
          <template #default="{ row }">
            <DictLabel v-model="row.type" code="message_type" />
          </template>
        </el-table-column>
        <el-table-column prop="isRead" label="阅读状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="row.isRead === 1 ? 'success' : 'warning'">
              {{ row.isRead === 1 ? "已读" : "未读" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="publishTime" label="发布时间" width="180" align="center" />
        <el-table-column fixed="right" label="操作" width="120" align="center">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleToProcess(row)">去处理</el-button>
            <el-button v-if="row.isRead === 0" type="primary" link @click="handleRead(row.id)">
              标记已读
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="mt-4 flex justify-end">
        <el-pagination
          v-model:current-page="queryForm.pageNum"
          v-model:page-size="queryForm.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  padding: 20px;

  :deep(.el-card__body) {
    padding-bottom: 0;
  }
}
</style>
